<template>
  <div style='position:relative'>
    <searchData></searchData>
    <div id="myChart" :style="{width: ww + 'px', height: '300px'}"></div>
  </div>
</template>

<script>
import searchData from '../searchData'
import eventBus from '../../eventBus'
import tools from '../../server/tools'
import fetchJson from '../../server/fetchJson'
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      dataX: [],
      dataY: [],
      ww: 1000
    }
  },
  mounted () {
    this.drawLine()
    this.ww = tools.getPageWidth() - 10
    var newDate = new Date()
    var month = newDate.getMonth() + 1
    var getDate = newDate.getDate()
    var fullYear = newDate.getFullYear()
    if (month < 10) month = '0' + month
    if (getDate < 10) getDate = '0' + getDate
    var obj = {
      start: fullYear + '-' + month + '-1',
      end: fullYear + '-' + month + '-' + getDate,
      keyword: '登陆'
    }
    
    this.selectDate(obj)
    // this.setDate(this.testData)
    // this.drawLine()
  },
  methods: {
    getDate (str) {
      var newDate = new Date()
      var month = newDate.getMonth() + 1
      var getDate = newDate.getDate()
      if (month < 10) month = '0' + month
      if (getDate < 10) month = '0' + getDate
      return newDate.getFullYear() + '-' + month + '-' + getDate
    },
    drawLine () {
        // 基于准备好的dom，初始化echarts实例
        var _this = this
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '登录次数' },
            color: ['rgb(25, 183, 207)'],
            tooltip: {},
            xAxis: {
                data: _this.dataX
            },
            yAxis: {},
            series: [{
                name: '登录次数',
                type: 'bar',
                data: _this.dataY
            }]
        })
    },
    setDate (data) {
       var chars = data.charts
       var dataX = []
       var dataY = []
       var XY = tools.getXY(chars)
      
       this.dataX = XY.dataX
       this.dataY = XY.dataY
    },
    reFreshcallback (data) {
      this.setDate(data)
      this.drawLine()
    },
    selectDate (dd) {
      eventBus.bus.$emit('showLoading')
      dd['keyword'] = '登录'
      var data = tools.jsonToStr(dd)
      fetchJson.getJson({
        self: this,
        url: '/log/syslogcharts/?' + data,
        callback: this.reFreshcallback,
        error: this.error
    })
    }
  },
  components: {
    searchData
  }
}
</script>
